<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>more</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="stylesheet" href="./css/cssreset-min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/more.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style>

     .swiper-container {
        width: 100%;
        height: 100%;
        margin-top:60px;
        margin-bottom:20px;
        padding-top:30px;
        background: #fff
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide img{
        width: 100%;
        cursor:pointer;
    }
    .swiper-pagination-bullet{
        background:#fff;
        opacity: 0.8;
    }

    .swiper-pagination-bullet-active{
        background: #007aff;
    }
    </style>
</head>
<body>
     <nav>
        <ul>
            <li><a href="./index.html"><span></span></a></li>
            <li>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <div></div></li>
            <li><span></span><div></div></li>
            <li><a href="./search.html">查找影院</a><div></div></li>
            <li><a href="./more.html">IMAX电影</a><div></div></li>
            <li><a href="./special.html">IMAX特点</a><div></div></li>
            <div class="header_hide">
                <p>语言666</p>
                <p>关于IMAX</p>
                <p>联系我们</p>
                <p>工作机会</p>
                <p>
                    <img src="images/guWeibo1.png" alt="">
                    <img src="images/guweixin1.png" alt="">
                    <img src="images/guYouku2.png" alt="">
                </p>
            </div>
        </ul>
        <ul>
            <li>
                <a href="./special.html">IMAX特点</a>
            </li>
            <li>
                <a href="./more.html">IMAX电影</a>
            </li>
            <li>
                <a href="./search.html">查找影院</a>
            </li>

        </ul>
    </nav>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="banner_live">
            <p>体验IMAX</p>
        </div>
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/mbanner1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/mbanner2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/mbanner3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/mbanner4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/mbanner5.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/mbanner6.jpg" alt=""></div>

        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <section class="main">
        <div class="banner_live">
            <p>更多电影</p>
        </div>
        <ul>
            <li>
            <img src="images/more1.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">但丁密码</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span>
                </a>
            </div>
            </li>
            <li>
            <img src="images/more2.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">奇异博士</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>

            </div>
            </li>
            <li>
            <img src="images/more3.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">神奇动物在哪里</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more4.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">侠盗一号：星球大战外传</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more5.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">长城</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more6.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">美女与野兽</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more7.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">逗鸟外传：萌宝满天飞</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more8.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">我的战争</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more9.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">冰川时代5：星际碰撞</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more10.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">谍影重重5</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more11.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">火海凌云</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>
            <li>
            <img src="images/more12.jpg" alt="">
            
            <div>
                <h3>即将上映</h3>
                <h1><a href="javascript:;">盗墓笔记</a></h1>
                <a href="javascript:;" class="main_more">更多详情<span class="main_more_hide"></span></a>
            </div>
            </li>

        </ul>
        <div class="main_bottom">
                <button>更 多 电 影</button>
        </div>

    </section>


    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop:true
    });
    

    
    </script>
    <script src="js/list.js"></script>
    <footer>
            <div class="footer_icon">
                <div>
                    <a href="javascript:;"><img src="images/guWibo2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guWixin2.png" alt=""></a>
                    <a href="javascript:;"><img src="images/guYouku.png" alt=""></a>
                </div>
            </div>
            <p>IMAX®和The IMAX Experience®是IMAX公司的注册商标</p>
            <p>
                <a href="javascript:;">使&nbsp;用&nbsp;条&nbsp;款</a>
                <a href="javascript:;">隐&nbsp;私&nbsp;政&nbsp;策</a>
            </p>
            <p>
                <span>
                <img src="images/new-china-license.png" alt="">
                <a href="javascript:;">沪ICP备11045714号</a>
                </span>
                <span>
                <img src="images/ghs.png" alt="">
                <a href="javascript:;">沪公网安备 31010102002067号</a>
                </span>
            </p>

    </footer>
    <script src="js/init.js"></script>
</body>
</html>